<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>PaddyShop安装程序</title>	
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
	<style>
		.ct{
			width: 960px;
			margin: auto;
			font-size: 14px;
		}
		.header{
			height: 90px;
			margin-bottom: 20px;			
			border-bottom: 1px solid #d4d4d4;
		}
		.footer{
			
		}
		.title{
			text-align: center;
			font-size: 16px;
		}
		.agreement{}	
		.tools{
			width: 100%;			
			display: flex;
			display: -webkit-flex;
			align-items:center;
			justify-content:center;
		}	
		.tools .btn{
			display: block;
			width: 200px;
			line-height: 2.5;
			height: 40px;
			background-color: #409EFF;
			text-align: center;
			color: #FFFFFF;
			border-radius: 5px;
			text-decoration: none;
			font-size: 16px;
			margin: 10px;
		}
		.checkTable{
			width: 100%;
			line-height: 2;
			margin: 10px 0px;
		}
	</style>
</head>
<body>
	<div class="ct header">
		<div class="logo"><img src="/static/logo.png" width="150"/></div>
	</div>
<!-- conntent start  -->
<div class="ct" id="app">
    <div class="title">数据库信息</div>
    <el-form :model="dbForm" :rules="rules" ref="dbForm" label-width="300px" class="dbForm">
        <el-form-item label="数据库服务器：" prop="dbhost" required>
          <el-input v-model="dbForm.dbhost" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="数据库端口：" prop="dbport" required>
            <el-input v-model.number="dbForm.dbport" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="数据库名称：" prop="dbname" required>
            <el-input v-model="dbForm.dbname" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="数据库用户名：" prop="dbuser" required>
          <el-input v-model="dbForm.dbuser" class="formInput"></el-input>
        </el-form-item>
        <el-form-item label="数据库密码：" prop="dbpwd" required>
            <el-input v-model="dbForm.dbpwd" type="password" class="formInput"></el-input>
        </el-form-item>
    </el-form>
    <div class="tools">
        <el-button @click="back" type="primary" plain>上一步</el-button>
        <el-button
        @click="confirm"
        type="primary"
        v-loading.fullscreen.lock="setupLoading" 
        element-loading-text="系统安装中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        确定</el-button>
    </div>
</div>
<!-- conntent end  -->
<!-- footer start -->
<div class="ct footer">
    © 2021 PADDYSHOP.NET
</div>
<!-- footer end -->

</body>
<script>
    const BASE_URL = ''
    new Vue({
        el: "#app",
        data: {
            setupLoading: false,
            dbForm: {
                dbhost: '127.0.0.1',
                dbport: 3306,
                dbname: 'paddyshop',
                dbuser: '',
                dbpwd: '',
            },
        rules: {
            dbhost: [
                { required: true, message: '请输入数据库服务器地址', trigger: 'blur' },
            ],
            dbport: [
                { type: 'number', required: true, message: '请输入正确的数据库端口', trigger: 'blur' },
            ],
            dbname: [
                { required: true, message: '请选择数据库名称', trigger: 'blur' },
            ],
            dbuser: [
                { required: true, message: '请选择数据库用户名', trigger: 'blur' },
            ],
            dbpwd: [
                { required: true, message: '请选择数据库密码', trigger: 'blur' },
            ],
        }
        },
        mounted () {
            
        },
        methods:{
            back(){
                window.history.back(-1);
            },
            confirm(){
                this.$refs['dbForm'].validate((valid) => {
                    if (valid) {
                        var that = this;
                        that.setupLoading = true;
                        axios.post('/index.php?s=/install/index/install',that.dbForm)
                        .then(res => {
                            that.setupLoading = false;
                            if(res.data.code == 200){
                                window.location.href='/install/successful.html';
                            }else{
                                that.$message.error(res.data.msg);
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                    } else {
                        console.log('fail')
                        return false;
                    }
                });
            },            
        }
    });
</script>
<style>
    .dbForm{
        margin-top: 20px;
    }
    .formInput{
        width: 400px;
    }
</style>
</html>